<template>
	<view>

		<view class="tab_box">
			<u-tabs activeColor='#E34305' inactiveColor='#000' fontSize="30" :list="cate" :bold="true" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>

        <view style="height: 80rpx;"></view>

		<view class="list_box">
			<view class="info" v-for="(item,index) in list" :key="index" >
				<view class="head" >
					<view>订单编号:{{item.order_no}}</view>
					<view class="red">{{item.statusText}}</view>
				</view>
				<view class="center" >
					<view class="f_s">
						<image :src="item.iimage" class="img"></image>
						<view class="c_right">
							<view class="name">{{item.fname}}</view>
							
							<view class="time">{{item.sku}}</view>
							
							<view class="time">x{{item.buy_num}}</view>
							 <view class="free">￥{{item.lnum}}</view>
						</view>
					</view>
					
					<view class="f_s">
						<view class="time">
							下单时间: {{item.createtime}}
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="btn" @click="$project.toPath('/pages/wx/linfo?id='+item.id)">查看详情</view>
					<view class="btn btn_blue" v-if="item.status==2" @click="jie(item,index)">接单</view>
					<view class="btn btn_blue" v-if="item.status==3" @click="start(item,index)">确认服务开始</view>
					<view class="btn btn_blue" v-if="item.status==4" @click="ques(item,index)">服务完成</view>
				</view>
			</view>
		</view>
		
		<view class="bitmap" v-if="emptyShow">
			<image :src="none" mode="aspectFit"></image>
			<view class="gray_font fs-13">
				暂无订单
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				cate: [
					{
						id: 0,
						name: '全部'
					},
					{
						id: 2,
						name: '待接单'
					},
					{
						id: 3,
						name: '待服务'
					},
					{
						id: 4,
						name: '服务中'
					}, 
					{
						id: 5,
						name: '已完成'
					}
				],
				params: {
					page: 1,
					limit: 10,
					status: 0,
					token:''
				},
				list: [],
				total: 0,
				emptyShow: false,
				none:''
			}
		},
		onShow() {
			this.getList();
		},
		onLoad(e) {
			this.none=this.$imgUrl+'assets/img/none_order.png';
			this.params.token=uni.getStorageSync('wxToken');
			if (e.status) {
							
							this.cate.forEach((res,index)=>{
								if(e.status==res.id){
									
									this.current = index;
									
								}
							});
							
							
							this.params.status = e.status;
						}
		},
		methods: {
			jie(e, index) {
				let _ = this;
				uni.showModal({
					title: '温馨提示',
					content: '确认接单?',
					success: (res) => {
						if (res.confirm) {
							_.$post(_.$api.jie, {
								id: e.id,
								token: uni.getStorageSync('wxToken')
							}, ress => {
								let {
									code,
									data,
									msg
								} = ress.data;
								_.$project.toast(msg);
								if (code == 1) {
									
									_.list[index].status = data.status;
									_.list[index].statusText = data.statusText;
									if (_.params.status > 0 && data.status != _.params.status) {
										_.list.splice(index, 1);
									}
			
								}
							});
			
						}
					}
				})
			},
			ques(e,index){
				let _=this;
				uni.showModal({
					title:'温馨提示',
					content:'确认服务完成?',
					success: (res) => {
						if(res.confirm){
							_.$post(_.$api.wxQue,{id:e.id,token:uni.getStorageSync('wxToken')},ress=>{
								let {code,data,msg}=ress.data;
								_.$project.toast(msg);
								if(code==1){
									
									_.list[index].status=data.status;
									_.list[index].statusText=data.statusText;
									if(_.params.status>0&&data.status!=_.params.status){
										_.list.splice(index,1);
									}
									
								}
							});
							
						}
					}
				})
			},
			start(e,index){
				let _=this;
				uni.showModal({
					title:'温馨提示',
					content:'是否确认开始服务?',
					success: (res) => {
						if(res.confirm){
							
							_.$post(_.$api.wxStart,{id:e.id,token:uni.getStorageSync('wxToken')},ress=>{
								let {code,data,msg}=ress.data;
								_.$project.toast(msg);
								if(code==1){
									
									_.list[index].status=data.status;
									_.list[index].statusText=data.statusText;
									if(_.params.status>0&&data.status!=_.params.status){
										_.list.splice(index,1);
									}
									
								}
							});
							
						}
					}
				})
			},
			change(e) {
				console.log(e);
				this.current = e;
				this.params.status=this.cate[e].id;
				this.getList();
			},
			getList() {
				this.params.page = 1;
				this.$get(this.$api.wxLists, this.params, res => {
					let data = res.data;

					if (!data.data.data || data.data.data.length < 1) {
						this.emptyShow = true;
					} else {
						this.emptyShow = false;
					}

					this.list = data.data.data;
					this.total = data.data.total;
				});
			},
			onReachBottom() {
				if (this.list.length < this.total) {
					this.params.page++;
					this.$get(this.$api.wxLists, this.params, res => {
						let data = res.data;
						data.data.data.forEach(ress => {
							this.list.push(ress);
						});
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-tab-item {
		background-color: transparent !important;
		font-size: 30rpx !important;
	}

    .tab_box{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
	}

	.list_box {
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.info {
		margin-top: 30rpx;
		background-color: white;
		border-radius: 20rpx;

	}

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15rpx 20rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #eee;
	}
	.red{
		color: red;
	}
	.center{
		box-sizing: border-box;
		padding: 15rpx 20rpx;
		border-bottom: 1rpx solid #eee;
		
	}
	.img{
		width: 35%;
		height: 240rpx;
		border-radius: 15rpx;
	}
	.c_right{
		width: 60%;
		text-align: left;
	}
	.name{
		font-weight: bold;
	}
	.time{
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	.m_box{
		font-size: 24rpx;
		text-align: right;
		
	}
	.money{
		font-size: 32rpx;
		color: red;
		font-weight: bold;
		margin-left: 20rpx;
	}
	.bottom{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
	}
	.btn{
		box-sizing: border-box;
		padding: 8rpx 25rpx;
		border: 1rpx solid black;
		font-size: 26rpx;
		border-radius: 25rpx;
		margin-left: 20rpx;
	}
	.btn_red{
			border: 1rpx solid red;
			color:red;
	}
	.btn_blue{
		border: 1rpx solid #E34305;
		color:#E34305;
	}
	.bitmap {
		margin-top: 10vh;
		text-align: center;
	}
	.f_s{
		display: flex;
		
		justify-content: space-between;
	}
	.f_c_s{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.free{
		color: red;
		text-align: right;
		margin-top: 40rpx;
	}
</style>